<template>
	<view>
		<view class="chatTitleWrap">
			<view :style="{ height: `${statusBarHeight}px`}"></view>
			<!-- 自定义导航栏高度 并 居中 -->
			<view
				:style="{
				height: `${barHeight}px`,
				'line-height': `${barHeight}px`,
				'text-align': 'center',
				}"
			>
				<text>{{ notes }}</text>
			</view>
		</view>
		<view class="tips color_fff size_12 align_c" :class="{ 'show':ajax.loading }" @tap="getHistoryMsg">{{ajax.loadText}}</view>
		<view :style="{paddingTop: `${barHeight+30}px`}" class="box-1" id="list-box">
			<view class="talk-list">
				<view v-for="(item,index) in talkList" :key="index" :id="`msg-${item.id}`">
					<view class="item flex_col" :class=" item.senderUserId == userInfo.id ? 'push':'pull' ">
						<image :src="item.senderUserId == userInfo.id ? userAvatar : friendUserAvatar" mode="aspectFill" class="pic"></image>
						<view class="content">{{item.messageContent}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="box-2"  :style="{bottom: inputBottom+'px'}">
			<view class="flex_col">
				<view class="flex_grow">
					<input type="text" @focus="getHeight" @blur="getMinHeight" class="content" v-model="content" placeholder="请输入聊天内容" placeholder-style="color:#DDD;" :adjust-position="false" always-embed>
				</view>
				<button class="send" @tap="send">发送</button>
			</view>
		</view>
	</view>
</template>

<script>
	import { sendMessage, getMaxPage, recevoirMsg } from '../../../utils/api'
	import { baseURL } from '../../../utils/baseUrl';
	export default {
		data() {
			return {
				msgFlg: true,
				statusBarHeight:'',
            	barHeight:'',
				inputBottom:'',
				recipientUserId:'',
				friendUserAvatar:null,
				userAvatar:null,
				notes:'',
				content:'',
				pageNo:'',
				baseURL,
				userInfo:{},
				talkList:[],
				ajax:{
					rows:20,	//每页数量
					page:1,	//页码
					flag:true,	// 请求开关
					loading:true,	// 加载中
					loadText:'正在获取消息'
				},
			}
		},
		onLoad(options){
			console.log("options",options)
			this.recipientUserId = options.toUserId;
			this.friendUserAvatar = options.toAvatar != 'null' ? `${options.toAvatar}`:'https://img95.699pic.com/xsj/10/tm/0h.jpg%21/fh/300';
			this.notes = options.notes;
			let userInfo = uni.getStorageSync("userInfo");
			this.userInfo = userInfo;
			this.userAvatar = userInfo.avatar != null ? userInfo.avatar:'https://img95.699pic.com/xsj/10/tm/0h.jpg%21/fh/300'
			this.initData();
		},
		onShow(){
			this.getMessage();
		},
		mounted() {
			// 状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight; 
			// 胶囊数据
			const { top, height } = wx.getMenuButtonBoundingClientRect();
			// 自定义导航栏高度 = 胶囊高度 + 胶囊的padding*2, 如果获取不到设置为38
			this.barHeight = height ? height + (top - this.statusBarHeight) * 2 : 38;
		},
		onPageScroll(e){
			if(e.scrollTop<5){
				// this.getHistoryMsg();
			}
		},
		methods: {
			getHeight(e){
				console.log("获取焦点",e.detail.height);
				this.inputBottom = e.detail.height
				// let selector = '';
				// selector = `#list-box`;
				// // 数据挂载后执行，不懂的请自行阅读 Vue.js 文档对 Vue.nextTick 函数说明。
				// let view = uni.createSelectorQuery().in(this).select(selector);
				// view.boundingClientRect((res) => {
				// 	uni.pageScrollTo({
				// 	    scrollTop:9999999,	// -30 为多显示出大半个消息的高度，示意上面还有信息。
				// 	    duration: 0
				// 	});
				// }).exec();
				console.log("inputbtoon",this.inputBottom)
			},
			getMinHeight(){
				this.inputBottom = 0;
				console.log("失去焦点",this.inputBottom)
			},
			// 获取socket消息
			getMessage(){
				let _this = this;
				uni.onSocketMessage(function (res) {
					let message = JSON.parse(res.data)
					console.log('收到消息：', message);
					message.object.messageContent = message.object.lastSessionMessage
					_this.talkList = [..._this.talkList,message.object];
					console.log("this.talkList======>",_this.talkList)
					console.log("_this.talkList[_this.talkList.length - 1]",_this.talkList[_this.talkList.length - 1])
					// let selector = '';
					// selector = `#msg-${_this.talkList[_this.talkList.length - 1].id}`;
					// console.log("selector",selector)
					// 数据挂载后执行，不懂的请自行阅读 Vue.js 文档对 Vue.nextTick 函数说明。
					_this.$nextTick(()=>{
						// 设置当前滚动的位置
						// _this.setPageScrollTo(selector);
						uni.pageScrollTo({
						    scrollTop:99999,	// -30 为多显示出大半个消息的高度，示意上面还有信息。
						    duration: 0
						});
					})
				});
			},
			async initData(){
				const maxPageRes = await getMaxPage(this.recipientUserId, this.userInfo.id);
				this.pageNo = maxPageRes.result;
				if(maxPageRes.code == 200){
					const res = await recevoirMsg(this.pageNo,this.recipientUserId, this.userInfo.id)
					if(res.code == 200){
						this.hideLoadTips(true);
						this.talkList = [...res.result.records, ...this.talkList];
						let selector = '';
						selector = `#msg-${this.talkList[this.talkList.length - 1].id}`;
						// 数据挂载后执行，不懂的请自行阅读 Vue.js 文档对 Vue.nextTick 函数说明。
						this.$nextTick(()=>{
							// 设置当前滚动的位置
							this.setPageScrollTo(selector);
							
						})
					}
				}
				
			},
			// 获取历史消息
			// getHistoryMsg(){
			// 	if(!this.ajax.flag){
			// 		return; //
			// 	}
				
			// 	// 此处用到 ES7 的 async/await 知识，为使代码更加优美。不懂的请自行学习。
			// 	let get = async ()=>{
			// 		this.hideLoadTips();
			// 		this.ajax.flag = false;
			// 		let data = await this.joinHistoryMsg();
					
			// 		console.log('----- 模拟数据格式，供参考 -----');
			// 		console.log(data);	// 查看请求返回的数据结构 
					
			// 		// 获取待滚动元素选择器，解决插入数据后，滚动条定位时使用
			// 		let selector = '';
										
			// 		if(this.ajax.page>1){
			// 			// 非第一页，则取历史消息数据的第一条信息元素
			// 			selector = `#msg-${this.talkList[0].id}`;
			// 		}else{
			// 			// 第一页，则取当前消息数据的最后一条信息元素
			// 			selector = `#msg-${data[data.length-1].id}`;
			// 		}
					
			// 		// 将获取到的消息数据合并到消息数组中
			// 		this.talkList = [...data,...this.talkList];	
					
			// 		// 数据挂载后执行，不懂的请自行阅读 Vue.js 文档对 Vue.nextTick 函数说明。
			// 		this.$nextTick(()=>{
			// 			// 设置当前滚动的位置
			// 			this.setPageScrollTo(selector);
						
			// 			this.hideLoadTips(true);
												
			// 			if(data.length < this.ajax.rows){
			// 				// 当前消息数据条数小于请求要求条数时，则无更多消息，不再允许请求。
			// 				// 可在此处编写无更多消息数据时的逻辑
			// 			}else{
			// 				this.ajax.page ++;
							
			// 				// 延迟 200ms ，以保证设置窗口滚动已完成
			// 				setTimeout(()=>{
			// 					this.ajax.flag = true;
			// 				},200)
			// 			}
						
			// 		})
			// 	}
			// 	get();
			// },
			// 拼接历史记录消息，正式项目可替换为请求历史记录接口
			// joinHistoryMsg(){
			// 	let join = ()=>{
			// 		let arr = [];
			// 		//通过当前页码及页数，模拟数据内容
			// 		let startIndex = (this.ajax.page-1) * this.ajax.rows;
			// 		let endIndex = startIndex + this.ajax.rows;
			// 		for(let i = startIndex; i < endIndex; i++){
			// 			arr.push({
			// 				"id":i,	// 消息的ID
			// 				"content":`这是历史记录的第${i+1}条消息`,	// 消息内容
			// 				"type":Math.random() > 0.5 ? 1 : 0	,// 此为消息类别，设 1 为发出去的消息，0 为收到对方的消息,
			// 				"pic":"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fa3ef99ad-ca8d-4bed-8500-6e11bbdec9c8%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1704003744&t=362cdb9a5bbd165d2bdad61bfa9eec86"	// 头像
			// 			})
			// 		}
					
			// 		/*
			// 			颠倒数组中元素的顺序。将最新的数据排在本次接口返回数据的最后面。
			// 			后端接口按 消息的时间降序查找出当前页的数据后，再将本页数据按消息时间降序排序返回。
			// 			这是数据的重点，因为页面滚动条和上拉加载历史的问题。
			// 		 */
			// 		arr.reverse();
					
			// 		return arr;
			// 	}
				
			// 	// 此处用到 ES6 的 Promise 知识，不懂的请自行学习。
			// 	return new Promise((done,fail)=>{
			// 		// 无数据请求接口，由 setTimeout 模拟，正式项目替换为 ajax 即可。
			// 		setTimeout(()=>{
			// 			let data = join();
			// 			done(data);
			// 		},1500);
			// 	})
			// },
			// 设置页面滚动位置
			setPageScrollTo(selector){
				let view = uni.createSelectorQuery().in(this).select(selector);
				view.boundingClientRect((res) => {
					uni.pageScrollTo({
					    scrollTop:res.top - 30,	// -30 为多显示出大半个消息的高度，示意上面还有信息。
					    duration: 0
					});
				}).exec();
			},
			// 隐藏加载提示
			hideLoadTips(flag){
				if(flag){
					this.ajax.loadText = '消息获取成功';
					setTimeout(()=>{
						this.ajax.loading = false;
					},300);
				}else{
					this.ajax.loading = true;
					this.ajax.loadText = '正在获取消息';
				}
			},
			// 发送信息
			async send(){
				if(!this.content){
					uni.showToast({
						title:'请输入有效的内容',
						icon:'none'
					})
					return;
				}
				if(this.msgFlg){
					this.msgFlg = false;
					setTimeout(() => {
						this.msgFlg = true;
					}, 1000);
					uni.showLoading({
						title:'正在发送'
					})
					const params = {
						"friendUserAvatar": this.friendUserAvatar,
						"messageContent": this.content,
						"notes": this.notes,
						"recipientUserId": this.recipientUserId,
						"senderUserId": this.userInfo.id,
						type:"1"
					}
					const res = await sendMessage(params);
					console.log("发送消息返回res============>",res)
					if(res.code == 200){
						uni.hideLoading();
						this.talkList.push(params);
						this.$nextTick(()=>{
							// 清空内容框中的内容
							this.content = '';
							uni.pageScrollTo({
								scrollTop: 999999,	// 设置一个超大值，以保证滚动条滚动到底部
								duration: 0
							});
						})
					}
					
				}
			}
		}
	}
</script>

<style lang="scss">
	@import "../../../lib/global.scss";
	page{
		background-color: #F3F3F3;
		font-size: 28rpx;
	}

	.chatTitleWrap{
		width: 100%;
		background-color: #fff;
		text-align: center;
		position: fixed;
		z-index: 999999;
	}
	
	/* 加载数据提示 */
	.tips{
		position: fixed;
		left: 0;
		top:var(--window-top);
		width: 100%;
		z-index: 9;
		background-color: rgba(0,0,0,0.15);
		height: 72rpx;
		line-height: 72rpx;
		transform:translateY(-80rpx);
		transition: transform 0.3s ease-in-out 0s;
		
		&.show{
			transform:translateY(0);
		}
	}
	
	.box-1{
		width: 100%;
		padding-bottom: 140rpx;
		box-sizing: content-box;

		/* 兼容iPhoneX */
		margin-bottom: 0;  
		margin-bottom: constant(safe-area-inset-bottom);  
		margin-bottom: env(safe-area-inset-bottom);  
	}
	.box-2{
		position: fixed;
		left: 0;
		width: 100%;
		bottom: 0;
		height: auto;
		z-index: 2;
		border-top: #e5e5e5 solid 1px;
		box-sizing: content-box;
		background-color: #F3F3F3;
		
		/* 兼容iPhoneX */
		padding-bottom: 0;  
		padding-bottom: constant(safe-area-inset-bottom);  
		padding-bottom: env(safe-area-inset-bottom);  
		
		>view{
			padding: 0 20rpx;
			height: 100rpx;
		}
		
		.content{
			background-color: #fff;
			height: 64rpx;
			padding: 0 20rpx;
			border-radius: 32rpx;
			font-size: 28rpx;
			
		}
		
		.send{
			background-color: #42b983;
			color: #fff;
			height: 64rpx;
			margin-left: 20rpx;
			border-radius: 32rpx;
			padding: 0;
			width: 120rpx;
			line-height: 62rpx;
			
			&:active{
				background-color: #5fc496;
			}
		}
	}
	
	.talk-list{
		padding-bottom: 20rpx;
		
		/* 消息项，基础类 */
		.item{
			padding: 20rpx 20rpx 0 20rpx;
			align-items:flex-start;
			align-content:flex-start;
			color: #333;
			
			.pic{
				width: 92rpx;
				height: 92rpx;
				border-radius: 50%;
				border: #fff solid 1px;
			}
			
			.content{
				padding: 20rpx;
				border-radius: 4px;
				max-width: 500rpx;
				word-break: break-all;
				line-height: 52rpx;
				position: relative;
			}
			
			/* 收到的消息 */
			&.pull{
				.content{
					margin-left: 32rpx;
					background-color: #fff;
					
					&::after{
						content: '';
						display: block;
						width: 0;
						height: 0;
						border-top: 16rpx solid transparent;
						border-bottom: 16rpx solid transparent;
						border-right: 20rpx solid #fff;
						position: absolute;
						top: 30rpx;
						left: -18rpx;
					}
				}
			}
			
			/* 发出的消息 */
			&.push{
				/* 主轴为水平方向，起点在右端。使不修改DOM结构，也能改变元素排列顺序 */
				flex-direction: row-reverse;
				
				.content{
					margin-right: 32rpx;
					background-color: #a0e959;
					
					&::after{
						content: '';
						display: block;
						width: 0;
						height: 0;
						border-top: 16rpx solid transparent;
						border-bottom: 16rpx solid transparent;
						border-left: 20rpx solid #a0e959;
						position: absolute;
						top: 30rpx;
						right: -18rpx;
					}
				}
			}
		}
	}
</style>